<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大缩小发光小球</title>
    <script src="three.min.js"></script>
    <style>
        body {
            background: #000;
        }

        a {
            color: #fff;
        }
    </style>
</head>
</head>
<body>
<script type="text/javascript">
    var scene = new THREE.Scene();
    //    scene.fog=new THREE.Fog(0xffffff,0.045,100);//启用场景雾化

    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0x000000, 1.0);//设置背景是黑的
    renderer.setSize(window.innerWidth, window.innerHeight);

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);//眼镜(相机)的视野大小设置

    //点光源
    var light = new THREE.DirectionalLight();
    light.position.set(0, 0, 80);//点光源位置，注意：这里与相机的位置是一致的
    scene.add(light);

    //导入纹理
    var texture = THREE.ImageUtils.loadTexture('mt4.png', {}, function () {//引入图片为mt4.png，该图片是半透明的，类似辉光效果
        renderer.render(scene, camera);
    });
    var material = new THREE.MeshLambertMaterial({//设置texture纹理
        map: texture,
        material: 0.5,//透明度 取值0-1；
        transparent: true,//设置是否为透明
    });

    //设置球3，该球效果是辉光效果
    var sphere3 = new THREE.Mesh(new THREE.SphereGeometry(5, 110, 140),//半径是5,多边形拟合数,多边形拟合数
        material);//引入上面声明的材质
    sphere3.position.set(0, 0, 10);//球心的坐标位置
    var pivotPoint = new THREE.Object3D();//3d效果
    sphere3.add(pivotPoint);//向球球3 添加3d效果
    scene.add(sphere3);

    //设置球4
    var sphere4 = new THREE.Mesh(new THREE.SphereGeometry(4, 40, 20),//半径是4,多边形拟合数,多边形拟合数
        new THREE.MeshNormalMaterial({//改材质是自发光球体，没有阴影的白色球体
//            emissive: 0xffffff,
        }));
    sphere4.overdraw = true;//这个没啥用
    sphere4.position.set(0, 0, 10);//球心的坐标位置，和上一个球的位置一样，
    scene.add(sphere4);


    camera.position.z = 80;//设置相机位置，x=0 y=0 z=80
    camera.lookAt(scene.position);
    document.body.appendChild(renderer.domElement);

    render();

    var i = 1;//动画判断参数

    function render() {
        //动画变大缩小
        if (i < 100) {
            sphere3.scale.x += 0.001;
            sphere3.scale.y += 0.001;
            sphere3.scale.z += 0.001;
            sphere4.scale.x += 0.001;
            sphere4.scale.y += 0.001;
            sphere4.scale.z += 0.001;
        } else if (i < 200) {
            sphere3.scale.x -= 0.001;
            sphere3.scale.y -= 0.001;
            sphere3.scale.z -= 0.001;
            sphere4.scale.x -= 0.001;
            sphere4.scale.y -= 0.001;
            sphere4.scale.z -= 0.001;
        } else i = 0;
        i++;

        renderer.render(scene, camera);//渲染场景
        requestAnimationFrame(render);//回到render方法重新渲染，得以实现上面的动画效果
    }

</script>
<canvas width="1242" height="609" style="width: 1242px; height: 609px;"></canvas>
</body>
</html>